<template>
  <div class="app-container">
    <!-- 添加步骤条，当前激活步骤为2 -->
    <el-steps :active="2" finish-status="success" align-center>
      <el-step title="申请请假" />
      <el-step title="申请审批" />
      <el-step title="请假审批" />
    </el-steps>
    <div class="page-title">请假申请审批</div>
    <!-- 审批状态标签：优化颜色，与待审批状态匹配 -->
    <div class="status-tag">
      <el-tag
        type="info"
        size="large"
        style="background-color: #e6f7ff; color: #1890ff"
      >
        待审批
      </el-tag>
    </div>
    <!-- 老人基本信息：统一label-width，确保标签对齐 -->
    <el-card class="mt-4">
      <template #header><h3>老人基本信息</h3></template>
      <!-- 全局设置label-width为120px，所有子项继承，避免宽度混乱 -->
      <el-form label-width="120px" class="mt-2" disabled>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单据编号">
              <el-input v-model="form.businessId" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="老人姓名">
              <el-input v-model="form.elderName" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号">
              <el-input v-model="form.idCard" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input v-model="form.phone" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="护理等级">
              <el-input v-model="form.nursingLevel" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="床位信息">
              <el-input v-model="form.bed" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="护理员">
              <el-input v-model="form.nurse" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 请假申请信息：同基本信息，统一label-width -->
    <el-card class="mt-4">
      <template #header><h3>请假申请信息</h3></template>
      <el-form label-width="120px" class="mt-2" disabled>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="陪同人类型">
              <el-input v-model="form.accompanyType" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="陪同人姓名">
              <el-input v-model="form.accompanyName" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="陪同人电话">
              <el-input v-model="form.accompanyPhone" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请假周期">
              <el-input v-model="form.leavePeriod" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计请假天数">
              <el-input v-model="form.expectedLeaveDays" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请假原因">
              <el-input
                v-model="form.leaveReason"
                type="textarea"
                rows="3"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请人">
              <el-input v-model="form.applicant" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请时间">
              <el-input v-model="form.applyTime" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 审批意见表单：保持原逻辑，优化按钮间距 -->
    <el-card class="mt-4">
      <template #header><h3>审批意见</h3></template>
      <el-form
        ref="approveFormRef"
        :model="approveForm"
        label-width="120px"
        class="mt-2"
      >
        <el-form-item
          label="审批结果"
          prop="approveResult"
          :rules="[
            { required: true, message: '请选择审批结果', trigger: 'change' },
          ]"
        >
          <el-radio-group v-model="approveForm.approveResult">
            <el-radio label="审批通过" />
            <el-radio label="审批拒绝" />
            <el-radio label="驳回" />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="审批意见"
          prop="approveOpinion"
          :rules="[
            { required: true, message: '请填写审批意见', trigger: 'blur' },
            { min: 2, message: '审批意见不能少于2个字符', trigger: 'blur' },
          ]"
        >
          <el-input
            v-model="approveForm.approveOpinion"
            type="textarea"
            rows="4"
            placeholder="请输入审批意见"
            maxlength="500"
            show-word-limit
          />
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 操作记录时间线：新增空状态，避免无数据时空白 -->
    <el-card class="mt-4">
      <template #header><h3>操作记录</h3></template>
      <div v-if="operationRecords.length === 0" class="empty-state">
        <el-empty description="暂无操作记录，审批后将生成记录" />
      </div>
      <el-timeline v-else>
        <el-timeline-item
          v-for="(item, index) in operationRecords"
          :key="index"
          :timestamp="formatTime(item.createTime)"
          :color="item.color"
        >
          <div>
            <strong>{{ item.operator }}</strong>
            <span class="ml-2">{{ item.content }}</span>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
    <!-- 操作按钮：优化间距和样式 -->
    <div class="mt-6 operate-btn">
      <el-button
        type="primary"
        @click="submit"
        :loading="submitting"
        style="margin-right: 16px"
        >提交审批</el-button
      >
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElEmpty } from "element-plus";
import { getRequest } from "@/api/le/request";
import {
  addAccraditationRecordSZH,
  listAccraditationRecord,
} from "@/api/le/accraditationRecord";
import { getUser } from "@/api/system/user";
import { updatePendingTasks } from "@/api/le/pendingTasks";
const extraField1Value = ref("");
const pendingTaskId = ref(""); // 初始化为空字符串
// 路由实例
const router = useRouter();
const route = useRoute();
// 请假详情表单：与index.vue提交字段严格对齐
const form = reactive({
  id: "", // 请假申请ID（后端返回）
  businessId: "", // 单据编号（index.vue的submitData.businessId）
  elderName: "", // 老人姓名（index.vue的basicForm.elderName）
  idCard: "", // 身份证号（index.vue的basicForm.idCard）
  phone: "", // 联系电话（index.vue的basicForm.phone）
  nursingLevel: "", // 护理等级（index.vue的basicForm.nursingLevel）
  bed: "", // 床位信息（index.vue的basicForm.bed）
  nurse: "", // 护理员（index.vue的basicForm.nurse）
  accompanyType: "", // 陪同人类型（index.vue的applyForm.accompanyType）
  accompanyName: "", // 陪同人姓名（处理"0"为"无"）
  accompanyPhone: "", // 陪同人电话（处理"0"为"无"）
  leavePeriod: "", // 请假周期（拼接开始/结束时间）
  leaveStartTime: "", // 请假开始时间（index.vue的submitData.leaveStartTime）
  expectedEndTime: "", // 请假结束时间（index.vue的submitData.expectedEndTime）
  expectedLeaveDays: "", // 预计请假天数（带"天"单位）
  leaveReason: "", // 请假原因（index.vue的applyForm.leaveReason）
  applicant: "", // 申请人（index.vue的护理员姓名）
  applyTime: "", // 申请时间（index.vue的submitData.createTime）
  // 辅助字段：用于拼接床位信息
  floorName: "",
  roomNo: "",
  bedNo: "",
});

// 审批表单数据
const approveForm = reactive({
  approveResult: "审批通过", // 默认审批通过
  approveOpinion: "", // 审批意见（必填）
});
const approveFormRef = ref(null);
const operationRecords = ref([]);
const submitting = ref(false);
// 2. 存储后端返回的护理组组长信息（替代Vuex）
const nurseLeaderInfo = ref(null);

// 3. 原生日期格式化：与index.vue保持一致，确保时间格式统一
const formatTime = (time) => {
  if (!time) return "";
  const date = new Date(time);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hour = String(date.getHours()).padStart(2, "0");
  const minute = String(date.getMinutes()).padStart(2, "0");
  const second = String(date.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};

// 4. 审批状态文本映射：与后端状态值对应
const getAuditStatusText = (status) => {
  const statusMap = {
    审批通过: 1, // 对应数据库1:通过
    审批拒绝: 2, // 对应数据库2:拒绝
    驳回: 3, // 对应数据库3:驳回
  };
  return statusMap[status] || "未知状态";
};

// 5. 页面加载：获取组长信息 + 请假详情 + 操作记录
onMounted(async () => {
  // 1. 获取护理组组长信息（userId=105）
  await getNurseLeaderInfo();
  // 新增：从路由参数中获取title并赋值给extraField1Value
  const title = route.query.title;
  extraField1Value.value = title;
  const {
    elderlyId,
    billNo,
    basicForm: basicFormStr,
    applyForm: applyFormStr,
    submitData: submitDataStr,
  } = route.query;
  const ptId = route.query.ptId;
  pendingTaskId.value = ptId; // 存储到响应式变量
  // 存储ptId
  // 逐个检查参数是否存在，收集缺失项
  const missingParams = [];
  if (!elderlyId) missingParams.push("老人ID");
  if (!billNo) missingParams.push("单据号");
  if (!basicFormStr) missingParams.push("基本信息表单");
  if (!applyFormStr) missingParams.push("申请信息表单");
  if (!submitDataStr) missingParams.push("提交数据");

  // 若有缺失，提示并延迟返回
  if (missingParams.length > 0) {
    ElMessage.error(
      `缺少必要参数：${missingParams.join("、")}，无法加载审批页面`
    );
    setTimeout(() => router.back(), 3000); // 3秒后返回上一页
    return;
  }

  // 解析序列化的参数（转成对象）
  const basicForm = JSON.parse(basicFormStr);
  const applyForm = JSON.parse(applyFormStr);
  const submitData = JSON.parse(submitDataStr);
  console.log("submitData:", submitData);
  // 正确获取：从 submitData 取护理员 nickName（index.vue 传递的昵称）
  const nurseNickName = submitData.nurseNickName; // 护理员userName
  console.log(nurseNickName);
  // 回显基本信息时使用护理员昵称
  //form.nurse = submitData.nurseNickName || basicForm.nurse || "无";
  // 5.3 直接从传递的参数中回显数据（无需调用 getRequest 接口）
  // 回显基本信息
  form.businessId = billNo; // 单据号
  form.elderName = basicForm.elderName || "";
  form.idCard = basicForm.idCard || "";
  form.phone = basicForm.phone || "";
  form.nursingLevel = basicForm.nursingLevel || "无";
  form.bed = basicForm.bed || ""; // 直接使用 index.vue 拼接好的床位信息
  form.nurse = basicForm.nurse || "无";
  form.applicant = nurseNickName; // 申请人=护理员userName（如“huliyuanA”）
  // 回显申请信息
  form.accompanyType = applyForm.accompanyType || "";
  // 处理"无陪同人"的特殊值（与 index.vue 逻辑一致）
  form.accompanyName =
    applyForm.accompanyType === "无" ? "无" : applyForm.accompanyName || "";
  form.accompanyPhone =
    applyForm.accompanyType === "无" ? "无" : applyForm.accompanyPhone || "";
  // 拼接请假周期（使用 submitData 中的时间）
  form.leaveStartTime = submitData.leaveStartTime || "";
  form.expectedEndTime = submitData.expectedEndTime || "";
  form.leavePeriod = `${form.leaveStartTime} —— ${form.expectedEndTime}`;
  // 显示请假天数（带单位）
  form.expectedLeaveDays = `${applyForm.leaveDays || 0}天`;
  form.leaveReason = applyForm.leaveReason || "";

  // 回显申请人和时间（使用 submitData 中的数据）
  //form.applicant = basicForm.nurse || ""; // 申请人为护理员
  form.applyTime = formatTime(submitData.createTime); // 使用提交时的时间

  // 5.4 加载操作记录（保留此逻辑，基于单据号查询）
  //await getOperationRecords();
  generateInitOperationRecords(nurseNickName);
});
// 辅助函数1：获取护理组组长信息（userId=105）
const getNurseLeaderInfo = async () => {
  try {
    const res = await getUser(105); // 固定查询userId=105的组长
    console.log("获取组长信息原始响应：", res); // 调试：查看原始响应
    if (res.code === 200 && res.data) {
      nurseLeaderInfo.value = res.data;
      console.log("护理组组长信息：", nurseLeaderInfo.value); // 含nickName（如“盛明兰”）
    } else {
      ElMessage.warning("未查询到护理组组长信息");
    }
  } catch (err) {
    console.error("获取组长信息失败：", err);
    ElMessage.error("加载审批人信息异常");
  }
};
// 辅助函数2：生成初始操作记录（无后端记录时显示）
const generateInitOperationRecords = (nurseNickName) => {
  const initRecords = [
    // 第一条：发起申请（operator=护理员userName，状态“已发起”）
    {
      operator: nurseNickName,
      content: "发起申请-申请请假（已发起）",
      createTime: form.applyTime,
      color: "blue",
    },
    // 第二条：审批中（operator=组长nickName，状态“审批中”）
    {
      operator: nurseLeaderInfo.value?.nickName,
      content: "护理组组长审批-申请审批（审批中）",
      createTime: formatTime(new Date()),
      color: "blue",
    },
  ];
  operationRecords.value = initRecords;
  // 尝试从后端获取最新记录（若有审批记录则覆盖）
};

// 7. 提交审批：使用后端组长信息，移除Vuex依赖
const submit = async () => {
  try {
    // 表单校验
    await approveFormRef.value.validate();

    // 校验组长信息是否存在
    if (!nurseLeaderInfo.value || !nurseLeaderInfo.value.userId) {
      ElMessage.error("未获取到审批人信息，请刷新页面重试");
      return;
    }
    const leader = nurseLeaderInfo.value;
    console.log("提交审批数据：", leader); // 调试：查看提交数据
    // 构造审批数据：与后端字段严格匹配
    const statusMap = {
      审批通过: 1, // 假设后端用 1 表示通过
      审批拒绝: 2, // 假设后端用 2 表示拒绝
      驳回: 3, // 假设后端用 3 表示驳回
    };
    const approvalData = {
      type: 2, // 请假类型（与index.vue一致）
      bussniessId: form.businessId, // 关联index.vue的单据号
      approverId: leader.userId, // 组长ID（后端接口返回）
      approverName: leader.nickName, // 组长nickName（如“盛明兰”）
      approverNameRole: "护理组组长", // 固定角色
      currentStep: "护理组组长审批",
      nextStep: "结束",
      nextApproverId: "",
      nextApprover: "",
      nextApproverRole: "",
      auditStatus: statusMap[approveForm.approveResult],
      opinion: approveForm.approveOpinion,
      stepNo: 1, // 第二步审批
      createTime: formatTime(new Date()), // 与index.vue时间格式一致
      createBy: leader.userId.toString(),
      finishTime: formatTime(new Date()), // 新增：添加finishTime字段，值为当前时间
      extraField1: extraField1Value.value, // 新增：传递title到后端
      handleType: 1, // 按需设置，若后端有默认值可留空
    };

    submitting.value = true;
    const res = await addAccraditationRecordSZH(approvalData);
    if (res.code === 200) {
      ElMessage.success("审批成功");
      // 更新待办任务状态
      await updatePendingTasks({
        id: Number(pendingTaskId.value), // 关键：将字符串转为数值
        isHandle: 1, // 已处理
        status: 2, // 已完成
      });
      // 跳转结果页：传递请假申请ID
      router.push({
        path: "/leaveApplication/thirdStep",
        query: {
          billNo: form.businessId, // 单据号
          // 传递 index.vue 原始数据（从路由参数中获取的序列化数据）
          indexSubmitData: route.query.submitData,
          indexBasicForm: route.query.basicForm,
          indexApplyForm: route.query.applyForm,
          // 传递 index1.vue 审批数据（序列化）
          approveData: JSON.stringify(approvalData),
          // 传递操作记录（序列化，包含发起申请+审批结果）
          operationRecords: JSON.stringify([
            ...operationRecords.value, // 原有初始记录（发起申请+审批中）
            // 新增审批结果记录（状态颜色匹配）
            {
              operator: leader.nickName || "护理组组长",
              // 显示与数据库注释一致的文本
              content: `护理组组长审批-申请审批（${
                approveForm.approveResult === "审批通过"
                  ? "通过"
                  : approveForm.approveResult === "审批拒绝"
                  ? "拒绝"
                  : "驳回"
              }）`,
              createTime: approvalData.createTime,
              color: approvalData.auditStatus === 1 ? "green" : "red", // 1表示通过（绿色），其他用红色
            },
          ]),
        },
      });
    } else {
      ElMessage.error(res.msg || "审批失败");
    }
  } catch (err) {
    console.error("提交审批失败：", err);
    if (err.name !== "ValidationError") {
      ElMessage.error("提交异常，请重试");
    }
  } finally {
    submitting.value = false;
  }
};

// 返回上一页
const goBack = () => {
  router.push("/xietong/pendingTasks");
};
</script>

<style scoped>
.page-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2329;
  margin-bottom: 20px;
}
.status-tag {
  margin-bottom: 20px;
  text-align: center;
}
.operate-btn {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 30px;
}
.el-timeline {
  padding: 10px 20px;
}
.el-timeline-item {
  margin-bottom: 15px;
}
/* 空状态样式：与老人选择弹窗空状态保持一致 */
.empty-state {
  text-align: center;
  padding: 40px 0;
}
/* 禁用输入框样式优化：确保文字颜色统一 */
.el-input.is-disabled .el-input__inner {
  color: #666;
  background-color: #f5f7fa;
}
</style>
